<template>
  <div class="login-container">
    <div class="login-card cute-card">
      <div class="login-header">
        <h1>伍月简历管理系统</h1>
        <p>管理员登录</p>
      </div>
      
      <n-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        size="large"
        :show-label="false"
      >
        <n-form-item path="username">
          <n-input
            v-model:value="formValue.username"
            placeholder="用户名"
            clearable
          >
            <template #prefix>
              <n-icon>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 11a4 4 0 1 0 0-8a4 4 0 0 0 0 8z"></path><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"></path></g></svg>
              </n-icon>
            </template>
          </n-input>
        </n-form-item>
        
        <n-form-item path="password">
          <n-input
            v-model:value="formValue.password"
            type="password"
            placeholder="密码"
            show-password-on="click"
            :maxlength="20"
          >
            <template #prefix>
              <n-icon>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></g></svg>
              </n-icon>
            </template>
          </n-input>
        </n-form-item>
        
        <div class="login-actions">
          <n-button
            type="primary"
            block
            round
            :loading="loading"
            @click="handleLogin"
          >
            登录
          </n-button>
        </div>
      </n-form>
      
      <div class="login-decoration">
        <div class="cute-decoration heart" style="top: 20px; right: 30px;"></div>
        <div class="cute-decoration heart" style="bottom: 30px; left: 20px;"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage, useLoadingBar } from 'naive-ui'
import adminApi from '../api/admin'

const router = useRouter()
const message = useMessage()
const loadingBar = useLoadingBar()
const formRef = ref(null)
const loading = ref(false)

// 表单数据
const formValue = reactive({
  username: '',
  password: ''
})

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}

// 登录处理
const handleLogin = (e) => {
  e.preventDefault()
  formRef.value?.validate(async (errors) => {
    if (errors) {
      return
    }
    
    loading.value = true
    loadingBar.start()
    
    try {
      const res = await adminApi.login(formValue)
      
      if (res.data.token) {
        localStorage.setItem('token', res.data.token)
        message.success('登录成功')
        router.push('/admin/dashboard')
      } else {
        message.error('登录失败')
      }
    } catch (error) {
      console.error('登录失败:', error)
      message.error('用户名或密码错误')
    } finally {
      loading.value = false
      loadingBar.finish()
    }
  })
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--background-color);
  background-image: radial-gradient(rgba(255, 133, 162, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.login-card {
  width: 400px;
  padding: 40px;
  position: relative;
  overflow: visible;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h1 {
  color: var(--primary-color);
  margin-bottom: 10px;
  font-weight: 500;
}

.login-header p {
  color: #888;
  font-size: 16px;
}

.login-actions {
  margin-top: 30px;
}
</style> 